<template>
	<div>
    <div class="load-flash" v-if="isloading"></div>
	  <menuHeader ref="menuHeader"></menuHeader>

    <div class="main">
      <div class="content" :class="{'go-top':needTop == true}">
        <div class="menu-sidebar" ref="menuWrapper">
          <ul>
              <li v-for="(menu,index) in goods" @click="selectMenu(index,$event)" :class="{'current':currentIndex==index}">
                  {{menu.dishesSortName}}
                  <div v-if="menu.total>0" class="menu-circle">{{menu.total}}</div>
              </li>
          </ul>
        </div>

        <div class="menu-list" ref="foodsWrapper" @touchstart="replaceCurrentIndex=false">
          <ul>
              <li v-for="menu in goods" class="food-list-hook">
                  <h2>{{menu.dishesSortName}}</h2>
                  <ul>
                      <li v-for="food in menu.list">
                          <img v-lazy="food.imgUrl" @click="selectAttr(food,$event)" v-if="food.imgUrl">
                          <img src="../images/nodish.png" @click="selectAttr(food,$event)" v-if="!food.imgUrl">
                          <h3>{{food.dishesName}}</h3>
                          <p>月售{{food.soldNumber}}份</p>
                          <p class="price">￥{{food.price}}<small>/{{food.units}}</small></p>
                          <div class="spec-bt" v-if="food.attributeStatus==1 && food.status==0">
                            <div style="position:relative;">
                              <button class="btn-small" @click.self.stop="selectAttr(food,$event)">选规格</button>
                              <div v-if="food.attrCount>0" class="attr-circle">{{food.attrCount}}</div>
                            </div>
                          </div>
                           <img src="../images/sellout.png" class="sellout" v-if="food.status==1">
                          <div class="num-wrapper" v-if="food.status==0 && !food.attributeStatus">
                              <numberControl :food="food" @drop="drop($event)"></numberControl>
                          </div>
                      </li>
                  </ul>
              </li>
              <li class="food-list-hook" v-show="goods.length>0"><h2>图片仅供参考 菜品请以实物为准</h2></li>
          </ul>
        </div>
      </div>

      <!-- 购物车 -->
      <div class="shopcart">
        <div class="shop-content">
          <div class="shopcart-box" @click="listToggle">
              <i class="icon-x icon-x4"></i>
              <span class="num" v-if="totalCount>0">{{totalCount}}</span>
          </div>
          <p>合计:{{totalPrice.toFixed(2)}}元</p>
          <button type="button" class="btn-primary" :class="isDisabledBtn" :disabled = "isDisabled" @click="nextStep()">下一步</button>
        </div>
        <div class="ball-container">
          <div v-for="ball in balls">
            <transition
              name="drop"
              v-on:before-enter="beforeEnter"
              v-on:enter="enter"
              v-on:after-enter="afterEnter"
              tag="div"
            >
              <div v-show="ball.show" class="ball">
                <div class="inner inner-hook"></div>
              </div>
            </transition>
          </div>
        </div>

        <!-- 购物车弹出列表 -->
        <transition name="transHeight">
        <div class="shopcart-list" v-show="listShow">
          <div class="list-header">
            <h1 class="title">桌号: {{tableName}}</h1>
            <span class="empty" @click="setEmpty()">清空</span>
          </div>
          <div class="list-content" ref="foodlist">
          <!-- 结构样式需要修改 -->
            <ul>
              <li class="food" v-for="food in selectFoods">
              <!-- 没有特性的情况 -->
                <div class="main-content" v-if="!food.attribute">
                  <span class="name text-overflow">{{food.dishesName}}</span>
                  <div class="price">
                    <span>￥{{ (food.price * food.count).toFixed(2)}}</span>
                  </div>
                  <div class="cartcontrol-wrapper">
                    <numberControl :food="food" @drop="drop($event)"></numberControl>
                  </div>
                </div>

              <!-- 有特性的情况 -->
                <ul v-if="food.attribute">
                  <li class="food main-content" v-for="attr in food.attribute" v-if="attr.count>0">
                    <span class="name text-overflow">{{food.dishesName}}({{attr.dishesPropertyItem.itemName}})</span>
                    <div class="price">
                      <span>￥{{(attr.money * attr.count).toFixed(2)}}</span>
                    </div>
                    <div class="cartcontrol-wrapper">
                      <numberControl :food="attr" @drop="drop($event)"></numberControl>
                    </div>
                  </li>
                </ul>

              </li>
              <!-- 单元 -->
            </ul>
          </div>
        </div>
      </transition>

      </div>

      <transition name="fade-backdrop">
        <div class="backdrop" v-show="showBackdrop" @click="listShow=false"></div>
      </transition>

      <!-- 清空购物车询问框 -->
      <div class="clean-cart-dialog" v-if="showFlag">
          <div class="dialog-content">
            <p class="dialog-text">确定要清空购物车吗?</p>
            <div class="opt-block">
              <button type="button" class="float-left" style="background-color: white;border:1px solid #11bbb4;color:#000" @click="showFlag = false">取消</button>
              <button type="button" class="float-right" style="background-color: #11bbb4;border:1px solid #11bbb4:" @click="cleanCart()">确定</button>
            </div>
          </div>
      </div>

      <food :food="selectedFoodObj" ref="food"></food>

    </div>
    </div>
</template>
<script>

  import Vue from 'vue'
  import BScroll from 'better-scroll'
  import numberControl from '../components/numberControl'
  import food from '../components/food.vue'
  import menuHeader from '../components/menuHeader.vue'
  import { Lazyload } from 'mint-ui';

  Vue.use(Lazyload);

  const SUCCESS = 200;

  export default {
      name:'menu',
      data(){
        let tableName = this.$route.query.tableName;
          return {
              isloading: true,
              scrollY:0,
              goods:[],
              listHeight:[],
              dropBalls:[],
              listShow:false,
              balls:[
                {
                  show:false
                },
                {
                  show:false
                },
                {
                  show:false
                },
                {
                  show:false
                },
                {
                  show:false
                }
              ],
              selectedFoodObj:{},
              showFlag:false,
              needTop:false,
              currentIndex:0,
              replaceCurrentIndex: false,
              tableName:tableName
          }
      },

      activated(){
          const _this=this;
        
          this.$root.$data.eventHub.$on('isNeedClean', function (isNeedClean) {
            if(isNeedClean){
              _this.selectFoods.forEach((food) => {
                if(food.attribute){
                  food.attribute.forEach(function(val) {
                    val.count =0
                  });
                };
                food.count = 0
              })

            }
          });

      },
      created () {

          window.localStorage.clear();
          let token = this.$route.query.token;
          let storeId = this.$route.query.storeId;
          let tableId = this.$route.query.tableId;
          let tableName = this.$route.query.tableName;

          console.log("token:"+token);
          console.log("storeId:"+storeId);
          console.log("tableId:"+tableId);
          console.log("tableName:"+tableName);

          localStorage.setItem("token",token);
          localStorage.setItem("storeId",storeId);
          localStorage.setItem("tableId",tableId);
          localStorage.setItem("tableName",tableName);

          this._getFoods(storeId);
          this._getDiscount(storeId);

      },
      computed:{
        // currentIndex(){
        //   for(let i=0;i<this.listHeight.length;i++){
        //     let height1=this.listHeight[i]
        //     let height2=this.listHeight[i+1]
        //     if(!height2 || (this.scrollY>=height1 && this.scrollY<height2)){
        //       return i
        //     }
        //   }
        //   return 0
        // },
        selectFoods(){
          let list=[];
          this.goods.forEach(function(good) {
            good.list.forEach((food)=>{
              if(food.count){
                list.push(food);
              }
            })
          });
          return list
        },
        totalPrice(){
           let total=0;
          this.selectFoods.forEach(function(food) {
            if(food.attribute){
                total+=food.total;
            }else{
              total+=food.price*food.count
            }
          });
          return total
        },
        totalCount(){
          let total=0;
          this.selectFoods.forEach(function(food) {
            if(food.attribute){
                total+=food.attrCount;
            }else{
              total+=food.count;
            }
          });
          return total
        },
        showBackdrop() {
          if (this.listShow && this.totalPrice) {
            return true
          }
          this.listShow = false;
          return false
        },
        isDisabledBtn(){
          let total=0;
          this.selectFoods.forEach(function(food) {
            total+=food.count
          });
          if(total == 0){
            return "disabled-btn"
          } else{
            return null
          }
        },
        isDisabled(){
          let total=0;
          this.selectFoods.forEach(function(food) {
            total+=food.count
          });
          if(total == 0){
            return true
          } else{
            return false
          }
        }
      },
      methods:{
        initScroll(){
          //初始化侧边栏滚动
          let menuScroll = new BScroll(this.$refs.menuWrapper,{
            click:true//打开点击事件
          });
          //初始化菜单列表滚动
          this.foodsScroll = new BScroll(this.$refs.foodsWrapper,{
            click:true,
            probeType:3
          });
          let _this = this;
          this.foodsScroll.on('scroll',(pos)=>{
            _this.scrollY=Math.abs(Math.round(pos.y))
            for(let i=0;i<_this.listHeight.length;i++){
              let height1=_this.listHeight[i]
              let height2=_this.listHeight[i+1]
              if(!height2 || (_this.scrollY>=height1 && _this.scrollY<height2)){
                if(_this.replaceCurrentIndex){//点击左边菜单
                    return _this.currentIndex;
                }else{
                    return _this.currentIndex = i;
                }
              }
            }

          })
        },
        //计算每个分类的高度
        _calculateHeight(){
          let foodList =this.$refs.foodsWrapper.getElementsByClassName('food-list-hook')
          let height = 0;
          this.listHeight.push(height);
          for(let i=0;i<foodList.length;i++){
            let item = foodList[i];
            height += item.clientHeight;
            this.listHeight.push(height)
          }
        },
        selectAttr(food,event){
          // if(!event._constructed){
          //   return
          // };
          this.selectedFoodObj = food;
          //如果菜品已卖完
          if(this.selectedFoodObj.status == 1) return;

          this.$refs.food.showFlag=true;

          //根据 是否有属性判断是否需要发送请求
          console.log("是否有属性:"+food.attributeStatus);
          const _this = this;
          if(!_this.selectedFoodObj.attribute && food.attributeStatus == 1){
             this.$http.get(
            '/fastfood/findFoodAttributesInfo?menusItemId='+food.menusItemId,
            ).then((response) => {
                if(response.data.code == SUCCESS){
                  console.log("属性数组长度:"+response.data.model.length);

                   _this.$set(_this.selectedFoodObj,'attribute',response.data.model);
                  if(!_this.selectedFoodObj.selAttr){
                    _this.$set(_this.selectedFoodObj,'selAttr',_this.selectedFoodObj.attribute[0].itemId);
                  }

                }
            })
          }
         
        },
        //选择菜单
        selectMenu(index,enent){
          //浏览器没有_constructed
          // if(!enent._constructed){
          //   return;
          // }

          this.currentIndex = index;
          if(!this.replaceCurrentIndex){
            this.replaceCurrentIndex = true;
          }

          let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook')
          let el = foodList[index];

          //获取列表dom，并且滚动到对应位置
          this.foodsScroll.scrollToElement(el,300)
        },
        //小球动画开始
        drop(target){
          this.$nextTick(()=>{
            for(let i=0;i<this.balls.length;i++){
              let ball =this.balls[i]
              if(!ball.show){
                ball.show=true;
                ball.el=target;
                this.dropBalls.push(ball);
                return;
              }
            }
          })
        },
        beforeEnter:function(el){
          let count = this.balls.length;
          while(count--){
            let ball =this.balls[count];
            if(ball.show){
              let rect = ball.el.getBoundingClientRect();
              let x = rect.left-32;
              let y = -(window.innerHeight-rect.top-22)
              el.style.display='';
              el.style.webkitTransform = `translate3d(0,${y}px,0)`
              el.style.transform = `translate3d(0,${y}px,0)`
              let inner = el.querySelector('.inner-hook')
              inner.style.webkitTransform = `translate3d(${x}px,0,0)`
              inner.style.transform = `translate3d(${x}px,0,0)`
            }
          }
        },
        enter(el,done){
          let rf = el.offsetHeight;
          this.$nextTick(()=>{
            el.style.webkitTransform = 'translate3d(0,0,0)'
            el.style.transform = 'translate3d(0,0,0)'
            let inner = el.querySelector('.inner-hook')
            inner.style.webkitTransform = 'translate3d(0,0,0)'
            inner.style.transform = 'translate3d(0,0,0)'
            el.addEventListener('transitionend',done)
          })
        },
        afterEnter(el){
          let ball = this.dropBalls.shift();
          if(ball){
            ball.show=false;
            el.style.display='none'
          }
        },
        //动画结束
        //点击购物车
        listToggle() {
          if (!this.selectFoods.length) {
            return
          }
          this.listShow = !this.listShow
          if (this.listShow) {
            this.$nextTick(() => {
              if (!this.foodlistScroll) {
                this._initScroll()
              } else {
                this.foodlistScroll.refresh()
              }
            })
          }
        },
        //初始化购物车列表
        _initScroll() {
          this.foodlistScroll = new BScroll(this.$refs.foodlist, {
            click: true
          });
        },
        //清空购物车
        setEmpty() {
          this.showFlag = true;
        },
        //下一步
        nextStep() {
          let total = 0;
          let totalPrice = 0;
          this.selectFoods.forEach(function(food) {
            total += food.count;
             if(food.attribute){
              console.log("菜品属性:"+food.attribute[0].dishesPropertyItem.itemName)
              // console.log("菜品属性:"+food.attribute)
                totalPrice+=food.total;
            }else{
              totalPrice += food.price*food.count
            }

          });

           totalPrice = totalPrice.toFixed(2);

          console.log("总个数:"+total);
          console.log("总金额:"+totalPrice);

          window.localStorage.setItem('total', total);
          window.localStorage.setItem('totalPrice', totalPrice);
          window.localStorage.setItem('selectFoods', JSON.stringify(this.selectFoods));

          this.$router.push('/orderConfirm');
        },
        cleanCart(){
          this.showFlag = false;
          this.listShow = false;
   
          this.selectFoods.forEach((food) => {
            if(food.attribute){
              food.attribute.forEach(function(val) {
                val.count =0
              });
            };
            food.count = 0
          })

        },
        _getFoods(storeId){
          const _this = this; 
           this.$http.get(
            '/fastfood/selectMenus?storeId='+storeId,
            ).then((response) => {
                if(response.data.code == SUCCESS){
                   console.log("请求菜单成功!");
                   let menusId = response.data.model[0].menusId;
                   if(menusId != null && menusId != '' && menusId != undefined){
                    console.log("menusId:"+response.data.model[0].menusId);
                    window.localStorage.setItem('menusId', menusId);
                   }

                   let dishList = response.data.model[0].dishesSortList;
                   window.localStorage.setItem('goods', JSON.stringify(dishList));
                   window.localStorage.setItem('storeName', response.data.model[0].storeName);

                   _this.goods = dishList;
                    _this.$nextTick(() => {
                        _this.initScroll(); // 初始化scroll
                        _this._calculateHeight(); // 初始化列表高度列表
                    });

                    //关闭动画
                    _this.isloading = false;
                }
            });
        },
        _getDiscount(storeId){
           const _this = this;

          //请求优惠信息
           this.$http.get(
          '/fastfood/findActivityInfo?storeId='+storeId,
          ).then((response) => {
              if(response.data.code == SUCCESS){
                 console.log("请求优惠消息成功!");
                 if(response.data.model != null){

                  window.localStorage.setItem('discount', JSON.stringify(response.data.model));

                  _this.needTop = false;
                  _this.$refs.menuHeader.isShow = true;
                  _this.$refs.menuHeader.discountMsg = response.data.model.name;
                 }else{
                  _this.needTop = true;
                  _this.$refs.menuHeader.isShow = false;
                 }
               
              }
          })
        }
      },
      watch:{
        goods: {
          handler: function (val, oldVal) {
            val.forEach(function(menu) {
              let menuTotal = 0;
              menu.list.forEach(function(food) {
                //设置有规格商品的总价
                if(food.attribute){
                  let totalPrice=0;
                  let attrCount=0;
                  food.attribute.forEach(function(attr){
                    if(attr.count && attr.count>0){
                      totalPrice+=attr.money*attr.count;
                      attrCount += attr.count;
                    }
                  });
                  Vue.set(food,'total',totalPrice);
                  Vue.set(food,'attrCount',attrCount);

                };

                if(food.attribute){
                  if(food.attrCount){
                    menuTotal+=food.attrCount;
                  }
                }else{
                   if(food.count){
                    menuTotal+=food.count;
                  }
                }

              });
              Vue.set(menu,'total',menuTotal);
            });
            
          },
          deep: true
        }
      },
      components:{
          numberControl,
          food,
          menuHeader

      }
  }
</script>

<style lang="less">

 .load-flash {
    position: fixed;
    top: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    background: #fff url(../images/load.gif) no-repeat center 35%;
    background-size: 65%;
  }

  .main {
      position:relative;

      .no-discount {
        top: 100px!important;
      }

      .go-top {
        top:83px!important;
      }
      .content {
        position: fixed;
        z-index: 1;
        top:109px;
        left:0;
        bottom:50px;
        width: 100%;
        background: #fff;

        .menu-sidebar {
            width:100px;
            background:#f7fbfc;
            overflow: hidden;
            position: absolute;
            left: 0;
            top: 0;
            bottom:0;

             li {
                border-bottom:1px dashed #e4e6e3;
                padding: 14px 10px;
                text-align: center;
                font-size: 14px;
                position:relative;

                .menu-circle {
                    width: 18px;
                    height: 18px;
                    line-height: 18px;
                    border-radius: 50%;
                    background: rgb(248, 97, 52);
                    color: white;
                    text-align: center;
                    font-size: 12px;
                    position:absolute;
                    right: 0;
                    top: 3px;
                }

                &.current {
                   background: #fff;
                   color:#11bab3;
                   border-left:2px solid #11bab3;
                }
              }
          }


          .menu-list {
                padding-left:100px;
                height: 100%;

                  ul {
                    li {
                         h2 {
                          color: #666;
                          font-size: 12px;
                          padding: 5px;
                          background: #f7fbfc;
                          border-left: 2px solid #d9dde1;
                        }

                        ul {
                          li {
                              padding: 10px;
                              overflow: hidden;
                              border-bottom: 1px solid rgba(7,17,27,.1);
                              position: relative;

                              img {
                                  float: left;
                                  width: 70px;
                                  height: 70px;
                                  margin-right: 10px;
                              }

                              .spec-bt {
                                   position: absolute;
                                    right:10px;
                                    bottom:10px;

                                     .mint-badge {
                                      position: absolute;
                                      right: -6px;
                                      top: -6px;
                                    }

                                    .attr-circle {
                                      width: 18px;
                                      height: 18px;
                                      line-height: 18px;
                                      border-radius: 50%;
                                      background: rgb(248, 97, 52);
                                      color: white;
                                      text-align: center;
                                      font-size: 12px;
                                      position:absolute;
                                      right: 0;
                                      top: -4px;
                                    }
                              }

                              h3 {
                                  color: #303030;
                                  font-size: 16px;
                                  font-weight: normal;
                                  margin-bottom: 10px;
                                  overflow-x: hidden;
                                  text-overflow: ellipsis;
                                  white-space: nowrap;
                              }

                              p {
                                  color: #c2c2c2;
                                  font-size: 12px;

                                  &.price {
                                     color: #f86134;
                                     font-size: 16px;
                                     margin-top:10px;

                                     small {
                                       color: #c2c2c2;
                                        font-size: 12px;
                                        margin-left: 5px;
                                     }
                                  }
                              }

                            .sellout {
                              width: 44px;
                              height: 44px;
                              position: absolute;
                              right: 0;
                              bottom: 10px;
                            }

                            .num-wrapper {
                                position: absolute;
                                right: 0;
                                bottom: 0;
                            }

                          }

                        }

                    }
                  }
            }

      }

  .btn-small {
      background: #11bab3;
      border: none;
      color: #fff;
      padding: 3px 10px;
      border-radius: 10px;
      outline: none;
      font-size: 12px;
  }

  .btn-primary {
      background: #11bab3;
      border:none;
      color: #fff;
      font-size: 16px;
      border-radius: 3px;
      padding: 10px 0;
      width: 100px;
  }

  .disabled-btn {
    background: #ccc!important;
    color: #f8f3f3!important;
  }

  .shopcart {
      position: fixed;
      z-index:300;
      left: 0;
      right: 0;
      background: #fff;
      bottom: 0;
      height: 50px;

      &:before {
            content: " ";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            border-bottom: 1px solid #BCBAB6;
            color: #BCBAB6;
            -webkit-transform-origin:0 100%;
            transform-origin:0 100%;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }

       .shop-content {
          background: #fff;
          overflow: hidden;
          padding-left: 80px;

            button.btn-primary {
                float: right;
                margin: 5px;
              }

              .shopcart-box{
                width: 56px;
                height: 56px;
                border-radius: 50%;
                background: #11bab3;
                position: absolute;
                top: -10px;
                left: 10px;
                text-align: center;

                .num {
                    position: absolute;
                    right: 0;
                    top: 0;
                    display: block;
                    background: #f86134;
                    color: #fff;
                    width: 24px;
                    height: 16px;
                    line-height: 16px;
                    font-size: 9px;
                    box-shadow: 0 4px 8px 0 rgba(0,0,0,.4);
                    font-weight: 700;
                    border-radius: 16px;
                    text-align: center;
                  }

                  i {
                      color: #fff;
                      font-size: 30px;
                      line-height: 55px;
                  }
             }

            p {
                float: left;
                line-height: 50px;
                color: #666;
            }
        }


       .ball-container {
          .ball {
            position: fixed;
            left: 32px;
            bottom: 22px;
            z-index: 2;

            &.drop-enter-active {
                transition:all 0.4s cubic-bezier(0.49,-0.29,0.75,0.41);

                .inner {
                  width:16px;
                  height:16px;
                  border-radius:50%;
                  background:#11bab3;
                  transition:all 0.4s linear;
                }
            }
         }
      }

      .shopcart-list {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          background: white;
          transform: translate3d(0,-100%,0);
          z-index: -1;

          &.transHeight-enter-active,&.transHeight-leave-active {
            transition: all 0.5s;
          }
          &.transHeight-enter,&.transHeight-leave-active {
            transform: translate3d(0,0,0);
          }

          .list-header {
            height:40px;
            line-height: 40px;
            background: #f3f5f7;
            border-bottom: 1px solid rgba(7,17,27,0.1);

              .title {
                display: inline-block;
                font-size: 14px;
                font-weight: 200;
                color: rgb(7,17,27);
                padding-left: 18px;
              }

              .empty {
                position: absolute;
                right: 8px;
                font-size: 14px;
                color: rgb(0,160,220);
                padding: 0 10px;
              }
            }

          .list-content {
            max-height: 217px;
            overflow: hidden;

            .food {
              position: relative;
              margin: 0 18px;
              overflow: hidden;
              border-bottom: 1px dashed #BCBAB6;

                 .main-content {
                    position: relative;
                    height: 48px;
                    padding-right: 150px;
                  }

                  .name {
                    display: block;
                    font-size: 14px;
                    color: rgb(7,17,27);
                    line-height: 48px;
                    font-weight: 700;
                  }
                  .price {
                    font-size: 14px;
                    font-weight: 700;
                    color:rgb(240,20,20);
                    padding: 0 12px 0 18px;
                    line-height:48px;
                    position: absolute;
                    right: 80px;
                    top: 0;
                  }
                  .cartcontrol-wrapper {
                    font-size: 14px;
                    margin-top: 6px;
                    position: absolute;
                    right: 0;
                    top: 0;
                  }

                  ul {
                      display: block;

                      li {
                        &.food {
                          margin: 0;
                          border-bottom: none;
                        }
                      }
                  }

              }
          }
      }

  }

  .backdrop {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 200;

    &.fade-backdrop-enter-active,&.fade-backdrop-leave-active {
      transition: opacity 0.5s;
    }

    &.fade-backdrop-enter,&.fade-backdrop-leave-active {
      opacity: 0 ;
    }
  }


    .clean-cart-dialog {
        position: fixed;
        width: 85%;
        top: 30%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background-color: white;
        text-align: center;
        border-radius: 3px;
        border-radius: 2px;
        z-index: 1000;

      .dialog-content {
        padding: 20px 40px 15px;

      .dialog-text {
        font-size: 17px;
        margin-bottom: 20px;
        }

      .opt-block {
        height: 40px;

      button {
          width: 100px;
          height: 34px;
          font-size: 14px;
          border-radius: 4px;
          color: white;
        }
      }

    }
      
  }

}
</style>
